<!DOCTYPE html>
<html>
<head>
	<title>js_21</title>
	<style type="text/css">
		.palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
        .animation {
        	width: 100px;
        	height: 100px;
        	background: url("../img/smile.jpg") no-repeat left top;
        	/*background-size: cover;*/
        }
	</style>
</head>
<body>

	<!-- 编码一 -->
	<input id="name" type="text" onkeydown="keyDwon(event)">    
	<button id="submit-btn">Submit</button>



	<!-- 编码二 -->
	<label  onclick="swichRadio()">
        <input id="school" name="status" type="radio">
        School
    </label>
    <label onclick="swichRadio()">
        <input id="company" name="status" type="radio">
        Company
    </label>

    <select id="school-select">        
        <option>北京邮电大学</option>
        <option>黑龙江大学</option>
        <option>华中科技大学</option>
    </select>

    <select id="company-select">        
        <option>百度</option>
        <option>爱奇艺</option>        
    </select>


    <!-- 编码三 一个ul里有5个li，请使用事件委托的方式使当点击li时当前li背景色变红-->
    <ul id="ul-wrapper">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ul>		



    <!--编码四 使用事件委托的方式点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色  -->

    <ul class="palette" id="palette-wrapper">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>        
    </ul>
    <p class="color-picker"></p>


    <!-- 编码五 -->
    <!-- 
    点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
	在动画过程中，按钮的状态变为不可点击
	在动画结束后，按钮状态恢复，且文字变成“淡入”
	在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
	淡入动画结束后，按钮文字变为“淡出”
	暂时不要使用 CSS animation （以后我们再学习） -->
    <div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
	<button id="fade-btn">淡出</button>



	<!-- 编码六 -->
	<!-- 实现一个帧动画 -->
	<div class="animation" id="animation"></div>

	<script type="text/javascript">
		// 编码一
		var submit_btn = document.getElementById("submit-btn");
		var Ivalue = document.getElementById("name");
			submit_btn.onclick = function() {
				console.log('name');
			}
			function keyDwon(e) {
				var keyNum = window.event ? e.keyCode : e.which;
				console.log(keyNum)
				if (keyNum == 13) {
					console.log(Ivalue.value);
				}

				if (keyNum == 32) {
					alert('按下空格键')
				}
				if (keyNum == 27) {
					Ivalue.value = '';
				}
			}
	</script>

	<script type="text/javascript">
		// 编码二

		var g = function(id) {
			return document.getElementById(id);
		}

		var school = g("school"),
			company = g("company"),
			S_Select = g("school-select"),
			C_Select = g("company-select");

		function swichRadio() {
			if (school.checked)	{
				S_Select.style.display = 'block';
				C_Select.style.display = 'none';
			} 
			if (company.checked) {
				S_Select.style.display = 'none';
				C_Select.style.display = 'block';
			}
		}
	</script>
	<script type="text/javascript">
		var ulWrapper = document.getElementById("ul-wrapper");
		ulWrapper.onmouseover = function(e) {
			var event = e || window.event;
			var target = event.target || event.srcElement; 
			if (target.nodeName.toLowerCase() == 'li') {
				target.style.background = 'red';
			}
		};

		ulWrapper.onmouseout = function(e) {
			var event = e || window.event;
			var target = event.target || event.srcElement; 
			if (target.nodeName.toLowerCase() == 'li') {
				target.style.background = '#fff';
			}
		};
	</script>
	<script type="text/javascript">
		var palette = document.getElementById("palette-wrapper");
		var p = document.querySelector(".color-picker");
			palette.onclick = function(event) {
				var e = event || window.event;
				var target = e.target || e.srcElement;
				if (target.nodeName.toLowerCase() == 'li') {
					p.innerHTML = target.style.backgroundColor;
					p.style.backgroundColor = target.style.backgroundColor;
				}
			}
	</script>

	<script type="text/javascript">
		var fadeObj = g("fade-obj"),
			fadeBtn = g("fade-btn"),
			flag = true,
			fadeText = '',
			num = 10;
		fadeBtn.onclick = function() {
			 fadeCommon()
			
		};

		function fadeCommon() {
			timer = setInterval(function(){
				fadeBtn.disabled = true;
				if (flag) {
					num--
				} else {
					num++
				}
				fadeObj.style.opacity = num / 10;
				if (num >= 10 || num <= 0) {
					clearInterval(timer);
					fadeBtn.disabled = false;
					if (num) {
						fadeText = (flag = true)? '淡出' : '淡入';
                    	fadeBtn.innerHTML = fadeText;
					} else {
						fadeText = (flag = false) ? '淡出' : '淡入';
                    	fadeBtn.innerHTML = fadeText;
					}
				}
			},100)
			
			
		}	
		

	</script>
</body>
</html>